import React, { Component } from 'react';
import {observer} from 'mobx-react';
import { Input, Button,Tooltip } from 'antd';
import { Link } from 'react-router-dom';
import model from './login_model';
import './login_styles.less';
import routerConf from '../../conf/routerConf';
import history from '../../utils/history';
@observer
class MainLayout extends Component {

  componentDidMount(){
    model.init();
  }
  render() {
    return (
      <div className="login-container">
        <div className="box">
          <h2>登陆</h2>
          <Tooltip title="请输入用户名">
            <Input 
              style={{marginBottom:10}}
              value={model.username} 
              onChange={(e)=>{
                model.setUsername(e.target.value);
              }}
              placeholder="请输入用户名"
            />
          </Tooltip>
          <Tooltip title="请输入用户密码">
            <Input 
              style={{marginBottom:10}}
              value={model.password} 
              type="password"
              onChange={(e)=>{
                model.setPassword(e.target.value);
              }}
              placeholder="请输入用户密码"
            />
          </Tooltip>
          <div className="captcha-code" style={{
            display:model.username.length>0
          }}>
            <Input 
              style={{marginRight:20}}
              value={model.captchaCode} 
              placeholder="请输入验证码"
              onChange={(e)=>{
                model.setCaptchaCode(e.target.value);
              }}/>
            <div ref={(ref)=>model.captchaBox = ref}  onClick={model.getCapcha}/>
          </div>
          
          <div className="opts">
            <Button onClick={model.login} type="primary">登陆</Button>
            <Button onClick={model.setEmpty}>置空</Button>
          </div>
          <div className="toReg">
          <Link to={routerConf.register.path}>注册账户</Link>
          </div>
        </div>
      </div>
    );
  }
}

export default MainLayout;
